<!DOCTYPE html>
<html>
<head>
    <title>VIEW</title>
    <#include "/header.html">
    <script src="${request.contextPath}/statics/plugins/jstemplate/template.js"></script>
</head>

<body>
<div id="webpage" v-cloak>
    <div v-show="appearance.showList">
        <div v-show="appearance.showControllBar" class="grid-btn">
            <span v-show="appearance.showSearchForm">

                <el-form :inline="true" :model="q" class="demo-form-inline" size="small">
                    <el-form-item label="昵称">
                        <el-input v-model="q.nickname" placeholder="请输入" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select v-model="q.state">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-button type="primary" @click="query" size="small" icon="el-icon-search">查询</el-button>
                    <el-radio-group v-model="live_type" class="live_type" size="small" @change="changeLiveType">
                       <el-radio-button label="all_live">全部直播</el-radio-button>
                       <el-radio-button label="today_live">今日开播</el-radio-button>
                </el-radio-group>
               </el-form>
            </span>
        </div>

        <table id="jqGrid"></table>
        <div id="jqGridPager"></div>
    </div>
</div>

<style type="text/css">
.userinfo{font-size: 12px; position: relative;}
.userinfo .icons{position: absolute; right: 10px; top: 0px;}
.userinfo .icons a{margin-right:10px;scolor:#00a157}
.live_type{float:right;}
    .live_type .item{margin-right:10px;}
</style>
<!-- 主播信息字段高级内容模板　-->
<div id="uidTemplate" style="display: none;">
    <div class="userinfo">
        <p>{{=data.title}}</p>
        <small>最近开播场次：{{=data.liveRoundId}}</small>
        <div class="icons">
            <a title="封面图" role="button" tabindex="10" data-trigger="hover" data-html="true" image="{{=data.coverImage}}"><i class="fa fa-picture-o" aria-hidden="true"></i></a>
            {{ if (data.isVerifyIdcard){ }}
                <a title="已实名认证"><i class="fa fa-address-card" aria-hidden="true"></i></a>
            {{ }else{ }}
                <a title="未实名认证" style="color:#dbdbdb"><i class="fa fa-address-card" aria-hidden="true"></i></a>
            {{ } }}
        </div>
    </div>
</div>
<script>

    template.config({
        sTag : '{{',
        eTag : '}}'
    });
    var uidTemplate = template($('#uidTemplate').html());
    set_grid_column_formatter('dataview/viewliveroomlist/nickname',function (cellValue , options , rowData) {
        console.log(rowData);
        return uidTemplate({
            data : rowData
        });
        return cellValue;
    });

    $('body').on('mouseenter','a[image]',function (){
        var cover=$(this);
        var html = '<div style="padding: 10px; width: 200px; margin: 0px auto"><img width="100%" onerror="$(this).parent().html(\'没有封面图\')" src="' + cover.attr('image') + '" /></div>'
        console.log(html);
        cover.attr('data-content',html).popover({
            html : true,
            container : 'body'
        }).popover('toggle');
    });

    set_grid_column_formatter('dataview/viewliveroomlist/state',function (cellvalue, options, rowData) {

        var text = '<a><span class="label label-default">未知状态</span></a>'
        switch (rowData.state){
            case 0 : text='<a><span class="label label-info">未直播</span></a>'; break;
            case 1 : text='<a href="javascript:;"><span class="label label-success">直播中</span></a>'; break;
            case -1 :
                case -2 :
                text='<a><span class="label label-danger">禁播</span></a>'; break;
        }
        return text;
    });

    set_grid_column_formatter('dataview/viewliveroomlist/totalSeconds',function (cellvalue, options, rowData) {
        var secs = rowData['totalSeconds'];
        return (secs / (3600 * 24)).toFixed(1) + ' 小时'
    });

    set_grid_column_formatter('dataview/viewliveroomlist/giftCount',function (cellvalue, options, rowData) {
        return rowData['onlineCount'] + ' / ' + rowData['giftCount'];
    });

    function setRoomState(uid , state){
        if(state === 0 ){
            layer.confirm('该操作将恢复直播，主播可以重新开始直播，您确认做此操作吗 ?？', {
                btn: ['确认恢复直播']
            }, function(){
                apipost('live/liveroom/set_room_state',{
                    uid : uid,
                    state : state,
                }).then(function (res) {
                    if(res.code>0){
                        $("#jqGrid").trigger('reloadGrid');
                        layer.closeAll();
                        alert('操作成功');
                    }
                    else{
                        alert(res.msg);
                    }
                });
            });
            return ;
        }
        var dialog = layer.open({
            type: 1,
            area: ['500px', 'auto'],
            title: '禁止直播',
            shade: 0.6,
            anim: 1,
            shadeClose : !0,
            content:'<form class="set-room-state-form">' +
                '<div style="padding:10px  30px;">' +
                '<div style="padding: 10px 0px; line-height: 180%;"><font color="red">如果主播当前正在直播则中断直播，并且禁止以后其开启直播推流，主播可以重新开始直播，请谨慎做此操作 !</font></div>' +
                '<div class="form-group">' +
                '<p>' +
                '<textarea style="width: 100%; height:100px; line-height: 180%; padding: 10px; border:solid 1px #dbdbdb; outline: none;">您的直播室由于相关原因被禁止直播，若有疑问，请联系客服人员 !</textarea>' +
                '</p>' +
                '</div>' +
                '<div class="form-group">' +
                '<p><button type="button" class="btn btn-danger ok">确认信息并提交</button></p>' +
                '</div>' +
                '</div></form>',
            success : function (index){
                var form = $('.set-room-state-form');
                form.on('click','button.btn.ok',function (){
                    var text = form.find('textarea:first').val();
                    apipost('live/liveroom/set_room_state',{
                        uid : uid,
                        state : state,
                        remark : text
                    }).then(function (res) {
                        if(res.code>0){
                            $("#jqGrid").trigger('reloadGrid');
                            alert('操作成功');
                        }
                        else{
                            alert(res.msg);
                        }
                    });
                    layer.closeAll();
                })
            }
        });
    }
</script>
<script src="${request.contextPath}/statics/js/modules/dataview/viewliveroomlist.js?_${.now?long}"></script>
</body>
</html>